<template>
  <div>
      <body id="poster">
          <div class="top">
            <router-link to="/"><img src="../../assets/img/lgxy_ioc.png" style="width: 180px;height: 70px;padding-top: 15px;padding-left: 80px;vertical-align: middle;padding-bottom: 20px;"/></router-link>
            <router-link to="/"><a style="margin-left: 1200px;text-decoration: none;" >返回首页</a></router-link>
            <!--<button @click="aaa"> ddd</button>-->
          </div>



          <el-form class="login-container" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-position="left" label-width="0px">
            <h3 class="login_title">登录</h3>
            <el-form-item prop="uphone">
              <el-input type="text" v-model="ruleForm.uphone" auto-complete="off" placeholder="请输入帐号..."></el-input>
            </el-form-item>

            <el-form-item prop="upassword">
              <el-input type="password" v-model="ruleForm.upassword" auto-complete="off" placeholder="6-16位密码，可用数字/字母/符号组合"></el-input>
            </el-form-item>

            <el-form-item style="width: 100%">
              <el-button type="primary" style="width: 100%;background-color: #D51423;border: none" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
            <span @click="zhuche" style="font-size: 12px;color: blue;cursor:pointer;"><i>没有账号？快来注册一个！！</i></span>
          </el-form>
      </body>


    <!--注册弹出层-->
    <el-dialog title="注册中心" :visible.sync="dialogFormVisible" width="450px">
      <el-form :model="zhuceForm" status-icon :rules="rules" ref="zhuceForm">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="phone1">
          <el-input v-model="zhuceForm.phone1" autocomplete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="pass">
          <el-input v-model="zhuceForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-checkbox v-model="checked1">我已经阅读并同意</el-checkbox><a style="text-decoration: none;color: cornflowerblue;" @click="showMessage">《用户协议》</a>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refform('zhuceForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm1('zhuceForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--协议-->
    <el-dialog
      title="用户协议"
      :visible.sync="dialogVisible"
      width="950px"
      center
      :lock-scroll="false">
        <span style="text-align: left">
          <div  style="height: 400px;width: 900px;overflow:auto; ">
          <span style="font-weight: bolder">一、用户协议总则</span><br>
          1、本协议双方为广州市领课网络科技有限公司（以下简称：领课科技）旗下的龙果学院（域名为：http://www.roncoo.com 以下简称：龙果学院）和龙果学院的注册用户（以下简称：用户）。<br>
          2、用户在注册前请仔细阅读本协议的条款，并按照页面上的提示完成全部注册程序。<br>
          3、用户在进行注册过程中点击“同意”按钮，即表示用户已充分知悉和完全接受本协议项下全部条款，进而与龙果学院达成本协议。<br>
            <span style="font-weight: bolder">二、用户服务使用说明</span><br>
          1、用户在注册时应按照注册提示填写准确的用户名、密码及真实的联系邮箱、手机号码等相关个人资料，符合完整、准确的要求。<br>
          2、用户一旦注册成功，便成为龙果学院网站合法的注册用户，将获得本网站的一个用户账号和相应密码，用户可随时修改自己的用户密码。用户应对其账号和密码安全负全部责任，并应对其用户名下所进行的所有行为和事件承担相应的法律责任。<br>
          3、用户同意接受龙果学院网站通过电子邮件或其他方式向用户发送有关商业信息。<br>
          4、龙果学院网站不对用户所发布信息的删除或储存失败负责。<br>
          5、龙果学院网站不提供账号删除服务，如果用户需要删除账号，请直接放弃使用即可。<br>
          6、龙果学院网站有判定用户的行为是否符合本网站服务条款要求的权利，如果用户违背了服务条款的规定，本网站有权对其用户所提供的网络服务进行中断或停止使用。<br>
          7、用户不得以任何非法目的或其它方式对龙果学院网站的个人用户账号进行转让、转借、倒卖、账号共享等行为（用户账号仅限由其本人使用）。<br>
            <span style="font-weight: bolder">三、协议内容的变更和修订</span><br>
          1、龙果学院网站有权在必要时修改服务条款，龙果学院网站服务条款一旦发生变动，将会在重要页面上提示修改内容。<br>
          2、用户如果不同意龙果学院所改动的内容，可自行停止使用本站网络服务。<br>
            3、如果用户继续享用本站网络服务，则视为同意接受本网站服务条款的变动。<br>
            4、龙果学院网站可随时根据实际情况中断或终止一项或多项网络服务而无需对任何用户或第三方承担任何责任，如用户对一项或多项网络服务的中断或终止有异议，可以行使如下权利：<br>
            （1）自行停止使用龙果学院网站的网络服务。<br>
            （2）通知龙果学院网站停止对该用户的服务。 结束用户服务后，用户使用网络服务的权利立即终止，从终止时起，用户没有权利再进行处理任何未完成的信息或服务，龙果学院网站也没有义务为其传送任何未处理的信息或未完成的服务给用户或任何第三方。<br/>
            <span style="font-weight: bolder">四、用户隐私条款</span><br>
            龙果学院网站将严格履行用户个人隐私保密义务，承诺不公开、编辑或透露用户个人信息，但以下特殊情况除外：<br>
            1、经注册用户事先许可授权。<br>
            2、遵守国家法律法规或配合相关政府部门的要求。<br>
            3、遵从龙果学院网站合法服务程序。<br>
            4、为维护社会公众利益以及龙果学院网站的合法权益所必须。<br>
            <span style="font-weight: bolder">五、注册用户的权利与义务</span><br>
            1、注册用户在使用龙果学院网站服务时，必须遵守中华人民共和国相关法律法规的规定，用户应同意将不会利用本服务进行任何违法或不正当的活动，否则用户将自行承担由此产生的一切法律责任。<br>
            2、用户在账号使用过程中不得上载、展示、张贴、传播或以其它方式传送含有下列内容之一的信息：<br>
            （1） 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的。<br>
            （2） 损害国家荣誉和利益的。<br>
            （3） 煽动民族仇恨、民族歧视、破坏民族团结的。<br>
            （4） 破坏国家宗教政策，宣扬邪教和封建迷信的。<br>
            （5） 散布谣言，扰乱社会秩序，破坏社会稳定的。<br>
            （6） 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的。<br>
            （7） 侮辱或者诽谤他人，侵害他人合法权利的。<br>
            （8） 含有虚假、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、猥亵、或其它道德上令人反感的内容。<br>
            3、不得为任何非法目的而使用网络服务系统。<br>
            4、不得利用龙果学院网站服务故意制作、传播计算机病毒等破坏性程序，或其他从事任何危害计算机信息网络安全的行为。<br>
            5、若用户行为违反上述约定，龙果学院网站有权作出独立判断并立即取消用户的服务账号，用户应对自己网上的行为承担一切法律责任，龙果学院网站的系统记录有可能作为用户违反法律的证据提交给相关主管部门。<br>
            6、用户应同意保障和维护龙果学院网站全体成员及其他用户的利益，如因违反本协议或违反有关的法律法规而给龙果学院网站或任何第三者造成损失，用户应承担因此产生的法律责任。<br>
            <span style="font-weight: bolder">六、龙果学院网络服务内容的所有权</span><br>
            1、龙果学院网站定义的网络服务内容包括但不限于：教学视频、资料、源码、文字、软件、声音、图片、商标等。该等内容均受《著作权法》、《商标法》、《专利法》、《计算机软件保护条例》及其他相关法律法规的保护。<br>
            2、龙果学院网站所有的文章版权归原文作者和龙果学院网站共同所有，任何人需要转载本网站版内的文章，必须事先取得原文作者和龙果学院网站的授权同意。<br>
            3、未经龙果学院网站或其他有权第三方的事先许可授权，用户不得对包括但不限于：教学视频、学习软件、学习资料、源码、图片、音频内容等在内的任何内容进行翻录、复制、发行、破解、信息网络传播或其他违反知识产权相关法律、法规的行为，否则所导致的一切民事、行政或刑事责任，由用户自行承担。<br>
            <span style="font-weight: bolder">七、龙果学院付费课程服务有效期声明</span><br>
            1、龙果学院注册用户购买付费视频教程的服务有效期为3年（按每年365天算），超出服务有效期后课程服务（视频播放及讲师答疑）终止不再另行通知。<br>
            2、龙果学院的付费会员按购买页面显示的服务有效期为准，过期自动失效。<br>
            <span style="font-weight: bolder">八、免责声明</span><br>
            1、用户同意承担使用龙果学院网站服务所存在的一切风险以及因使用网络服务而产生的一切后果，龙果学院网站对用户不承担任何责任。<br>
            2、龙果学院网站不担保服务一定能满足用户的要求，也不担保服务不会中断，亦对服务的及时性，安全性及可能发生的技术错误均不作任何担保。<br>
            3、任何由于黑客攻击、计算机病毒侵入或发作、政府管制、硬件故障、不可抗力等非龙果学院故意或严重过失而造成的用户个人资料泄露、丢失、被盗用、被篡改或服务暂定或终止的，对用户可能造成的风险或损失，龙果学院不承担法律责任。<br>
            <span style="font-weight: bolder">九、其他约定</span><br>
            1、用户同意因本平台服务产生的任何争议均适用中华人民共和国法律，相关争议任何一方可向领课科技住所地人民法院提起诉讼解决。<br>
            2、本协议中的标题仅为方便而设，不影响对于条款本身的解释。本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，其余条款仍应具有约束力。<br>
            （完）<br>
        </div></span>
      <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <!--确定协议-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="15%">
      <span>请先阅读并同意用户协议</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible2 = false" style="background-color: darkred">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    data() {
      return {
        ruleForm: {
          upassword: '123456',
          uphone: '15839694816'
        },
        zhuceForm:{
        phone1:'',
          pass:''
      },
        checked1:false,
        dialogVisible:false,
        dialogVisible2:false,
        dialogFormVisible: false,
        formLabelWidth: '60px',
        rules: {
          uphone: [
            // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
          ],
          upassword: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
          ],
          phone1: [
            // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      aaa(){
        alert(JSON.stringify(sessionStorage.getItem("uid")))
        alert(JSON.stringify(sessionStorage.getItem("issvip")))
        alert(JSON.stringify(sessionStorage.getItem("usertype")))
      },
      //协议事件
      showMessage(){
        this.dialogVisible=true;
      },
      //登录
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //验证成功 开始登录
            this.$axios2.post("user/findUser",qs.stringify(this.ruleForm)).then(r=>{
              if (r.data.code==200){
                //alert(JSON.stringify(r.data))
                //登录成功 添加token
                this.$message.success(JSON.stringify(r.data.message));
                sessionStorage.setItem("user",r.data.data);
                //添加用户-id到session
                sessionStorage.setItem("uid",JSON.stringify(r.data.uid));
                //添加isvip到session
                sessionStorage.setItem("issvip",JSON.stringify(r.data.issvip));
                //添加用户类型到session
                sessionStorage.setItem("usertype",JSON.stringify(r.data.usertype));
                //跳转首页
                this.$router.push('/');
              } else {
                this.$message.error(JSON.stringify(r.data.message))
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //注册按钮
      zhuche(){
        this.dialogFormVisible=true;
      },
      //注册确定按钮
      submitForm1(formName){

        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.checked1) {
              this.dialogVisible2=true;
            } else {
              let dat={
                uphone:this.zhuceForm.phone1,
                upassword:this.zhuceForm.pass
              };
              this.$axios2.post("user/addData",qs.stringify(dat)).then(r=>{

                if (r.data == 1) {
                  //用户名已经存在
                  this.$message.error('用户名已经存在啦，改一下试试！！！');
                  return false;
                }else {
                  this.$message.success("注册成功！！！");
                  this.$refs[formName].resetFields();
                  this.checked1=false;
                  this.dialogFormVisible=false;
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
            //
          }
        });
      },
      //取消
      refform(formName){
        this.$refs[formName].resetFields();
        this.checked1=false;
        this.dialogFormVisible=false;
      }
    }
  }
</script>

<style scoped>
  #poster {
    background: url("../../assets/img/denglu_backgroundimg.jpg") no-repeat;
    background-position: center;
    background-attachment: fixed;

    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }

  .top{
    height: 100px;
    border: 1px solid white;
    background-color: white;
  }

  body {
    margin: 0px;
    padding: 0;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 10% 70%;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

</style>
